<template>
  <div class="center">
    <div class="table_header flex flex_bet flex-wrap">
      <div class="table_button">
        <el-button type="primary" icon="el-icon-back" size="mini" @click="toClock()"></el-button>

        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="Refresh"></el-button>
      </div>
    </div>
    <el-table stripe style="width: 100%"  border fit highlight-current-row ref="tableDataRef" :data="tableData" :key="key">
      <el-table-column  min-width="50" align="center" prop="id" label="ID"></el-table-column>
      <el-table-column  min-width="70" align="center" prop="value" label="SN"></el-table-column>
      <el-table-column  min-width="50" align="center" prop="batch" label="批次"> </el-table-column>
      <el-table-column  min-width="100" align="center" prop="realname" label="姓名"></el-table-column>
      <el-table-column  align="center" prop="classlevel" label="班级"> </el-table-column>
      <el-table-column  align="center" prop="clockTimes" label="已打卡次数"> </el-table-column>
      <el-table-column  align="center" prop="notClockTimes" label="缺卡次数"> </el-table-column>
      <el-table-column  align="center" prop="clockRate" label="打卡率">
        <template slot-scope="scope">
          {{scope.row.clockRate}}%
        </template>
      </el-table-column>
      <el-table-column  label="操作" min-width="150" align="center">
        <template slot-scope="scope">
          <el-row>
            <el-button size="mini" type="primary" @click="getSnClockDetail(scope.row)">查看打卡详情</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination :current-page.sync="listQuery.startSize" background @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :page-sizes="[10, 50, 100, 200]"
                     layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="listQuery.pageSize">
      </el-pagination>
    </div>
    <!-- 添加弹窗 -->
    <el-dialog title="查看打卡详情" :visible.sync="formVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="40%" @close="addFormclose">
      <div class="clockDetail">
        <p style="margin-left: 10px">姓名：{{clockForm.realname}}</p>
        <p style="margin-left: 10px">设备码：{{clockForm.sn}}</p>
        <p style="margin-left: 10px">打卡次数：{{clockForm.clockTimes}}</p>
        <p style="margin-left: 10px">打卡周期：{{clockForm.cycleStart}} 至 {{clockForm.cycleEnd}}</p>
      </div>
      <div class="dayDetail">
        <div v-for="(item,index) in clockDetail" class="detailCard">
          <el-card v-show="item.clockStatus==1" style="background-color: #409EFF" @click.native="showClock(item)">
            <p class="text">已打卡</p>
            <p  class="text">{{item.day}}</p>
          </el-card>
          <el-card  v-show="item.clockStatus==-1" style="background-color: #909399">
            <p  class="text">未打卡</p>
            <p  class="text">{{item.day}}</p>
          </el-card>
          <el-card v-show="item.clockStatus==2" style="background-color: #67C23A">
            <p  class="text">待打卡</p>
            <p  class="text">{{item.day}}</p>
          </el-card>
          <el-card v-show="item.clockStatus==3" >
            <p   class="text">未到打卡期</p>
            <p class="text">{{item.day}}</p>
          </el-card>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formVisible = false" size="mini" round>关 闭</el-button>
      </div>
    </el-dialog>

    <el-dialog title="打卡详情" :visible.sync="detailVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="40%">
      <el-form :model="detailForm">
        <el-form-item label="打卡日期:" label-width="120px">
          <span>{{detailForm.clockTime}}</span>
        </el-form-item>
        <el-form-item label="打卡位置:" label-width="120px">
          <span>{{detailForm.position}}</span>
        </el-form-item>
        <el-form-item label="打卡内容:" label-width="120px">
          <span>{{detailForm.content}}</span>
        </el-form-item>
        <el-form-item label="文件:" label-width="120px">
          <div  v-for="(item,index) in detailForm.fileList" :key="index" >
            <el-row>
              <el-image style="width: 100px; height: 100px" :src="item.url" :preview-src-list="[item.url]">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </el-row>
            <el-link target="_blank" :href="item.url" :underline="false">
              <el-button size="mini" >点击下载</el-button>
            </el-link>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
  import {
    getAllClockSN, getSnClockDetail
  } from "@/api/launcherMade";
  export default {
    data() {
      return {
        key: 1,
        tableData: [],
        listQuery: {
          startSize: 1,
          pageSize: 10,
          userId: localStorage.getItem("ID"),
          id: this.$route.query.id
        },
        addForm: {
          name: '',
          type: [],
          send_type: 1,
          childAdmin: [],
          batch: [],
          icon: ''
        },
        formVisible: false,
        detailVisible: false,
        deleteDialogs: { show: false, deleteText: '', deleteId: 0 },
        clockDetail: [],
        detailForm: {
          clockTime: '',
          position: '',
          content: '',
          fileList: [],
        },
        total: 0,
        clockForm: {
          realname: '',
          sn: '',
          clockTimes: '',
          cycleStart: '',
          cycleEnd: '',
          content: ''
        }

      }
    },
    created() {
      this.getAllClockSNTableData()
    },
    methods: {
      Refresh() {
        this.getAllClockSNTableData()
      },
      getSnClockDetail(row) {
        this.formVisible = true
        this.editSubjects=true
        this.clockForm = {
          realname: row.realname,
          sn: row.value,
          clockTimes: row.clockTimes,
          cycleStart: row.cycleStart,
          cycleEnd: row.cycleEnd,
          content: row.content
        }
        getSnClockDetail({clock_id:this.$route.query.id, sn: row.value}).then(res => {
          this.clockDetail = res.data
        }).catch(err => {

        })
      },
      showClock(item) {
        this.detailVisible=true
        this.detailForm = {
          clockTime: item.clockTime,
          position: item.position,
          content: item.content,
          fileList: item.fileList,
        }
      },
      toClock() {
        this.$router.push({name: 'contentManage/clockInManage'});
      },
      getAllClockSNTableData() {
        getAllClockSN(this.listQuery).then(res => {
          this.tableData = res.data
          this.total = res.total
        }).catch(err => {
          this.tableData = []
          this.total = 0
        })
      },
      //分页
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getAllClockSNTableData()
      },
      handleCurrentChange(val) {
        this.listQuery.startSize = val
        this.getAllClockSNTableData()
      },
      //编辑添加表单关闭事件
      addFormclose() {
        this.editSubjects=false
        this.$nextTick(() => {
          this.clockDetail = []
        })
      },
    }
  }
</script>

<style >
  .dayDetail {
    display: flex;
    flex-wrap: wrap;
  }
  .dayDetail .detailCard {
    width: 120px;
    height: 100px;
    margin: 10px;
   }

  .text {
    padding-left: 15px;
  }
  .el-card__body {
    padding: 0px;
  }
  .clockDetail{
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
</style>




